<template>
  <view class="ss-user-info-wrap ss-p-t-50">
    <view class="ss-flex ss-col-center ss-row-between ss-m-b-20">
      <view class="left-box ss-flex ss-col-center ss-m-l-36">
        <view class="avatar-box ss-m-r-24" @tap="handleAvatarClick">
          <image
            class="avatar-img"
            :src="getAvatarUrl()"
            mode="aspectFill"
            @error="onAvatarError"
          ></image>
        </view>
        <view @tap="handleAvatarClick">
          <view class="nickname-box ss-flex ss-col-center">
            <view class="nick-name ss-m-r-20">{{
              userInfo?.nickname || nickname
            }}</view>
          </view>
          <view class="user-id-box" v-if="isLogin && userInfo?.id">
            <text class="user-id-text">ID: {{ userInfo.id }}</text>
          </view>
        </view>
      </view>
      <view class="right-box ss-m-r-52">
        <button class="ss-reset-button" @tap="showQrCodeModal">
          <text class="sicon-qrcode"></text>
        </button>
      </view>
    </view>

    <!--    <view-->
    <!--      class="bind-mobile-box ss-flex ss-row-between ss-col-center"-->
    <!--      v-if="isLogin && !userInfo.verification?.mobile"-->
    <!--    >-->
    <!--      <view class="ss-flex">-->
    <!--        <text class="cicon-mobile-o"></text>-->
    <!--        <view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全 </view>-->
    <!--      </view>-->
    <!--      <button class="ss-reset-button bind-btn" @tap="onBind">去绑定</button>-->
    <!--    </view>-->
    
    <!-- 推荐码弹窗 -->
    <SQrcodeModal ref="qrCodeModalRef" @close="onQrCodeModalClose" />
  </view>
</template>

<script setup>
import { computed, reactive, ref } from "vue";
import sheep from "@/sheep";
import { showShareModal, showAuthModal } from "@/sheep/hooks/useModal";
import { tap } from "lodash/seq";
import SQrcodeModal from "@/sheep/components/s-qrcode-modal/s-qrcode-modal.vue";

const userInfo = computed(() => sheep.$store("user").userInfo);
const isLogin = computed(() => sheep.$store("user").isLogin);
const qrCodeModalRef = ref();

const props = defineProps({
  background: {
    type: String,
    default: "",
  },
  // 头像
  avatar: {
    type: String,
    default: "",
  },
  nickname: {
    type: String,
    default: "请先登录",
  },
  vip: {
    type: [String, Number],
    default: "1",
  },
  collectNum: {
    type: [String, Number],
    default: "1",
  },
  likeNum: {
    type: [String, Number],
    default: "1",
  },
});

function onBind() {
  showAuthModal("changeMobile");
}

function handleLogin() {
  if (!isLogin.value) {
    sheep.$router.go("/pages/index/login");
  }
}

function handleAvatarClick(){
  if (!isLogin.value){
    sheep.$router.go('/pages/index/login');
  } else {
    sheep.$router.go('/pages/user/info');
  }
}

async function showQrCodeModal(){
  if (!isLogin.value){
    sheep.$router.go('/pages/index/login');
    return;
  }

  try {
    const result = await sheep.$api.user.getQrCode();
    if (result) {
      if (qrCodeModalRef.value) {
        qrCodeModalRef.value.openModal(result);
      } else {
        uni.previewImage({
          urls: [result],
          current: result
        });
      }
    }
  } catch (error) {
    sheep.$helper.toast('获取推荐码失败');
  }
}

function onQrCodeModalClose() {
}

function getAvatarUrl() {
  if (isLogin.value && userInfo.value.avatar) {
    if (userInfo.value.avatar.startsWith('http')) {
      return userInfo.value.avatar;
    }
    return sheep.$url.cdn(userInfo.value.avatar);
  }
  return 'https://git-open.oss-cn-shenzhen.aliyuncs.com/ruoyi-mall/uniapp/icons/default_avatar.png';
}

function onAvatarError(e) {
  e.target.src = 'https://git-open.oss-cn-shenzhen.aliyuncs.com/ruoyi-mall/uniapp/icons/default_avatar.png';
}
</script>

<style lang="scss" scoped>
.ss-user-info-wrap {
  box-sizing: border-box;

  .avatar-box {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    overflow: hidden;

    .avatar-img {
      width: 100%;
      height: 100%;
    }
  }

  .nick-name {
    font-size: 34rpx;
    font-weight: 400;
    color: #333333;
    line-height: normal;
  }

  .user-id-box {
    margin-top: 8rpx;
  }

  .user-id-text {
    font-size: 24rpx;
    color: #666666;
    line-height: normal;
  }

  .vip-img {
    width: 30rpx;
    height: 30rpx;
  }

  .sicon-qrcode {
    font-size: 40rpx;
  }
}

.bind-mobile-box {
  width: 100%;
  height: 84rpx;
  padding: 0 34rpx 0 44rpx;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);

  .cicon-mobile-o {
    font-size: 30rpx;
    color: #ff690d;
  }

  .mobile-title {
    font-size: 24rpx;
    font-weight: 500;
    color: #ff690d;
  }

  .bind-btn {
    width: 100rpx;
    height: 50rpx;
    background: #ff6100;
    border-radius: 25rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #ffffff;
  }
}
</style>
